<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>跑帮郎</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    {include file="public/resource"/}
</head>
<body>
<style>
    .header-a{
        float: left;
        text-align: center;
        color: #000;
        width: 15%
    }
</style>

<!--侧滑菜单容器-->
<div class="mui-off-canvas-wrap mui-draggable">

    <!--菜单部分-->
    <aside id="offCanvasSide" class="mui-off-canvas-left">
        <div id="offCanvasSideScroll" class="mui-scroll-wrapper" style="background: #fff">

            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tbody>
                <tr>
                    <td height="200" align="center" colspan="4">
                        <img id="headimg" style="width:180px; height:180px;margin-top: 10px; border-radius:50%;">
                    </td>
                </tr>
                <tr>
                    <td height="30" align="center" valign="top" colspan="4">
                        <form id="form" method="post" enctype="multipart/form-data" target="iframe" onsubmit="subt()">
                            <input type="file" style="display: none" id="file" name="headimg" accept="image/*">
                            <input type="text" id="name" name="name" readonly style="text-align: center; border: none;display:block;width: 70%;float:left;">
                            <select id="sex" style="display: block; width: 30%;float:left;color: orange" name="sex" onchange="$('form').submit();">
                                <option value="0">女</option>
                                <option value="1">男</option>
                                <option value="2">保密</option>
                            </select>
                        </form>
                    </td>
                </tr>
                <tr>
                    <td height="10" align="center" bgcolor="#ececf2" colspan="4"></td>
                </tr>
                <tr id="order_tr">
                    <td width="10">&nbsp;</td>
                    <td width="70%" height="50">
                        <span class="mui-icon mui-icon-paperplane" style=" color:#ff8502"></span> 发单列表
                    </td>
                    <td width="30%">
                        <div class="mui-icon mui-icon-arrowright" style="color: #ccc; float: right; margin-right: 5px; font-size: 18px"></div>
                    </td>
                </tr>
                </tbody>
            </table>

        </div>
    </aside>
    <iframe name="iframe" style="display: none;"></iframe>

    <!-- 主界面 -->
    <div class="mui-inner-wrap" id="wrap">
        <div id="layer" style="background: #000;opacity: 0.6;width: 100%;height: 100%; position: absolute; z-index: 99999;display: none;"></div>
        <header class="mui-bar mui-bar-nav" style="line-height: 50px;background: #fff;">
            <a id="show_menu" class="header-a" style="width: 10%;color: #000;">
                <i class="mui-icon mui-icon-contact mui-pull-left"></i>
            </a>
            <a id="shop" class="header-a" style="color: orange">帮买</a>
            <a class="header-a" id="bs" name="d">帮送</a>
            <a class="header-a" id="bq" name="d">帮取</a>
            <a class="header-a" id="bm" name="d">帮忙</a>
            <a class="header-a" id="yj" name="d">应急</a>
            <a class="header-a" id="sd" name="d">闪店</a>
        </header>
        <!--<div id="container"></div>-->
        <iframe src="__URL__/help?type=shop" style="width: 100%;height: 100%" frameborder="0"></iframe>
    </div>
</div>

<script>
    localStorage.setItem('token','{:input("get.token")}');
    localStorage.setItem('openid','{:input("get.openid")}');

    var token = localStorage.getItem('token');
    var openid = localStorage.getItem('openid');

    if(token == ''){
        alert('用户信息异常');
        location = '__ROOT__/wxapp/login';
    }



    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

    var wrap = mui('.mui-off-canvas-wrap').offCanvas();

    var menu = $(".header-a");
    for (var i in menu){
        if(menu[i].name == 'd'){
            document.getElementById(menu[i].id).addEventListener('tap', function(event) {
                //下载app
                if(isAndroid){
                    //跳转安卓下载
                    location.href = '{$data.android}';
                }else if(isiOS){
                    //跳转苹果下载
                    location.href = '{$data.ios}';
                }
            });
        }
    }

    document.getElementById('wrap').addEventListener('drag', function(event) {
        event.stopPropagation();
    });

    document.getElementById('offCanvasSide').addEventListener('drag', function(event) {
        event.stopPropagation();
    });

    document.getElementById('layer').addEventListener('tap',function () {
        wrap.toggle();
        $('#layer').hide();
    });

    document.getElementById('show_menu').addEventListener('tap',function () {
        wrap.toggle();
        $('#layer').show();
    });

    document.getElementById('headimg').addEventListener('tap',function () {
        $('#file').click();
    });

    document.getElementById('order_tr').addEventListener('tap',function () {
        location = '__URL__/help?type=order_list';
    });

    document.getElementById('file').addEventListener('change',function () {
        $('#headimg').attr('src',getFileUrl('file'));
        $('#form').submit();
    });

    function getFileUrl(sourceId) {
        var url;
        if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
            url = document.getElementById(sourceId).value;
        } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
            url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
        } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
            url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
        }else{
            url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
        }
        return url;
    }

    document.getElementById('name').addEventListener('click',function () {
        var edit_name = $('#name').val();
        layer.open({
            title: '编辑昵称',
            content: '<textarea id="edit_text" style="margin-left: -18px;">'+edit_name+'</textarea>',
            btn: ['确认', '取消'],
            yes: function(index){
                if($('#file').val() == ''){
                    $('#file').remove();
                }
                $('#name').val(document.getElementById('edit_text').value);
                layer.close(index);
                $('#form').submit();
            }
        });
    });


    $(document).ready(function () {

        $.ajax('__ROOT__/app/user/get_info?token=+'+token,{
            success:function (json) {
                $('#sex').val(json.data.sex);
                $('#name').val(json.data.name);
                $('#headimg').attr('src',json.data.headimg);
            }
        });

    });

    function subt() {
        $('#form').attr('action','__ROOT__/app/user/save_info?token='+token);
        layer.open({
            content: '修改成功',
            skin: 'msg',
            time: 2 //2秒后自动关闭
        });
    }
</script>
</body>
</html>